<template>
  <div>
    <a-card :bordered="false">
      <a-table
        v-bind="comTableConfig"
        v-model:selectedKeys="selectedKeys"
        :loading="stationLoading"
        page-position="bottom"
        :bordered="false"
        size="small"
        :columns="translateColumns(stationColumns)"
        column-resizable
        :data="stationData"
        :row-selection="rowSelection"
        row-key="stationId"
        :pagination="{
          pageSize: stationQuery.pageSize,
          total: stationQuery.total,
          current: stationQuery.pageNum,
          showJumper: true,
          showTotal: true
        }"
        @page-change="pageChange"
      >
        <template #status="{ record }">
          <a-tag :color="record.status === '0' ? 'green' : 'red'">
            {{ t[isOnline(record.status)] }}
          </a-tag>
        </template>
        <template #optional="{ record }">
          <div class="flex justify-center gap-2">
            <a-link @click="editItem(record)">
              {{ t["编辑"] }}
            </a-link>
            <span v-auth>
              <XDelete @ok="delByIds(record.stationId)">
                {{ t["删除"] }}
              </XDelete>
            </span>
          </div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { delStation } from "@/api/service/station/station";
import { Station } from "@/api/service/station/types";
import { isOnline } from "@/data/options/status";
import useTableConfig from "@/hook/useTableConfig";

import {
  getStationList,
  selectedKeys,
  showStation,
  stationData,
  stationLoading,
  stationQuery
} from "../data";
import { stationForm } from "../form/data";
import { stationColumns } from "./column";

const t = translate("公共模块");

/**
 * 注释:编辑模块
 *
 * */
const editItem = (item: Station) => {
  stationForm.value = {
    ...item
  };
  showStation.value = true;
};
const { rowSelection, comTableConfig } = useTableConfig(stationColumns);

function pageChange(index: number) {
  stationQuery.value.pageNum = index;
  getStationList();
}

async function delByIds(id: string) {
  let ids = [];
  if (id) {
    ids = [id];
  } else {
    ids = selectedKeys.value;
  }
  await delStation(ids);
  getStationList();
  selectedKeys.value = [];
}
</script>

<style lang="scss" scoped></style>
